import React, { useEffect, useState } from "react";
import axios from "axios";
import { PageHeader, Card, Col, Row, List } from "antd";
import { ItemGroupBy, ObjectToArray } from "../../utils";

export default function News() {
  const [newsList, setNewsList] = useState([]);
  useEffect(() => {
    const fetchData = async () => {
      const { data } = await axios.get("/news", {
        params: {
          publishState: 2,
          _expand: "category",
        },
      });
      const data1 = ObjectToArray(ItemGroupBy(data, "categoryId"));
      setNewsList(data1);
      console.log(data1);
    };
    fetchData();
  }, []);

  return (
    <>
      <PageHeader
        className="site-page-header"
        onBack={() => null}
        title="新闻列表"
        subTitle="查看新闻"
      />
      <div style={{ margin: 10 }}>
        <Row gutter={[16, 16]}>
          {newsList.map((item) => (
            <Col key={item[0].id} span={8}>
              <Card title={item[0].category.title} bordered hoverable>
                <List
                  dataSource={item}
                  pagination={{
                    pageSize: 5,
                  }}
                  renderItem={(news) => (
                    <List.Item>
                      <a href={`#/detail/${news.id}`}>{news.title}</a>
                    </List.Item>
                  )}
                />
              </Card>
            </Col>
          ))}
        </Row>
      </div>
    </>
  );
}
